<template>
  <div class="count">
    <h2>我是count组件</h2>
    <p>count的值是{{ count }}</p>
    <button @click="addCount()">累加</button>
    <p v-red>自定义red指令</p>
    <p v-bgColor="'green'">接收值的自定义指令</p>
    <p v-bgColor="'blue'">接收值的自定义指令</p>
  </div>
</template>

<script>
export default {
  props: ["addCount", "count"],
  directives: {
    //简写的自定义指令(定义的时候不需要添加v-,使用的时候需要添加v-)
    red(el) {
      //el：指令所绑定的元素，可以用来直接操作 DOM。
      // console.log(el);
      el.style.backgroundColor = "red";
    },

    //简写的接收值的自定义指令
    bgColor(el, binding) {
      // console.log(el, binding);
      el.style.backgroundColor = binding.value;
    },
  },
};
</script>

<style scoped>
.count {
  background-color: pink;
}
</style>